<template>
	<a-modal
		:visible="visible"
		:confirm-loading="confirmLoading"
		:title="
			item && item.id * 1 > 0
				? '修改批发市场`' + item.name + '`'
				: '添加批发市场 '
		"
		ok-text="确认保存"
		:mask-closable="false"
		@cancel="onClose"
		@ok="handleSubmit"
	>
		<a-form-model
			ref="formInline"
			:label-col="labelCol"
			:wrapper-col="wrapperCol"
			:model="formInline"
			@submit="handleSubmit"
		>
			<a-button v-show="false" html-type="submit" />

			<a-form-model-item label="市场名称" prop="name" required>
				<a-input
					v-model="formInline.name"
					:max-length="32"
					placeholder="请输入名称"
				/>
			</a-form-model-item>

			<a-form-model-item label="租户ID" prop="tenant_id">
				<a-input-number
					v-model="formInline.tenant_id"
					placeholder="请输入租户ID"
				/>
			</a-form-model-item>

			<a-form-model-item label="地址">
				<app-tree-select
					v-model="formInline.area_code"
					radio
					:code="$e.city"
					style="width: 100%"
					@change="(data) => (formInline.area_name = data.area_name_all)"
				/>
			</a-form-model-item>
			<a-form-model-item :wrapper-col="buttonCol">
				<a-input
					v-model="formInline.address"
					:max-length="255"
					placeholder="地址"
				/>
			</a-form-model-item>

			<a-form-model-item label="经纬度">
				<a-space>
					<a-input
						v-model="formInline.lat"
						:max-length="128"
						placeholder="经度"
					/>
					<a-input
						v-model="formInline.lng"
						:max-length="128"
						placeholder="纬度"
					/>
					<a-tooltip title="获取经纬度">
						<a-icon type="environment" @click="mapVisible = true" />
					</a-tooltip>
				</a-space>
				<app-map-getpoint
					v-model="mapVisible"
					:latitude="formInline.lat * 1"
					:longitude="formInline.lng * 1"
					@change="
						(latitude, longitude) => {
							formInline.lat = latitude + ''
							formInline.lng = longitude + ''
						}
					"
				/>
			</a-form-model-item>
			<a-form-model-item label="市场简介">
				<a-textarea
					v-model="formInline.describe"
					style="margin-top: 10px"
					:auto-size="{ minRows: 3 }"
				/>
			</a-form-model-item>

			<a-form-model-item :wrapper-col="buttonCol">
				<a-switch
					v-model="formInline.status_flag"
					checked-children="状态: 正常"
					un-checked-children="状态: 停止"
					@change="
						(val) => {
							formInline.status = val ? 1 : 0
						}
					"
				/>
			</a-form-model-item>
		</a-form-model>
	</a-modal>
</template>

<script>
	import salemarket from "@/api/salemarket"

	export default {
		model: {
			//event:什么时候触发v-model行为
			event: "change-visible",
			// 定义传递给v-model的那个变量，绑定到哪个属性值上
			prop: "visible",
		},
		props: {
			visible: {
				type: Boolean,
				default: false,
			},
			item: {
				type: Object,
				default: () => {
					return {
						id: 0,
						status: 1,
					}
				},
			},
		},
		data() {
			return {
				buttonCol: { span: 18, offset: 4 },
				labelCol: { span: 4 },
				wrapperCol: { span: 18 },
				confirmLoading: false,

				formInline: {
					...this.item,
				},

				mapVisible: false,

				uploadImageLoading: false,
			}
		},
		watch: {
			visible: function (showFlag) {
				if (!showFlag) return
				console.log(this.item)
				this.formInline = {
					status_flag: this.item.status == 1,
				}
				for (let ii in this.item) {
					this.$set(this.formInline, ii, this.item[ii])
				}
			},
		},
		created() {},
		mounted() {},
		methods: {
			onClose() {
				this.$emit("change-visible", false)
			},
			onChange() {
				this.onClose()
				this.$emit("change")
			},
			async handleSubmit(e) {
				e.preventDefault()

				let flag = undefined
				this.$refs.formInline.validate((valid) => (flag = valid))
				if (!flag) {
					return
				}

				this.confirmLoading = true

				if (this.$func.isNumber(this.item.id) && this.item.id * 1 > 0) {
					await salemarket
						.update(this.item.id, this.formInline)
						.then((response) => {
							if (response.code !== 1) {
								this.$message.error(response.message)
								return
							}
							this.$message.success(response.message)
							this.onChange()
							return
						})
					this.confirmLoading = false
					return
				}

				await salemarket.create(this.formInline).then((response) => {
					if (response.code !== 1) {
						this.$message.error(response.message)
						return
					}
					this.$message.success(response.message)
					this.onChange()
					return
				})

				this.confirmLoading = false
			},
		},
	}
</script>

<style lang="less" type="text/less" scoped>
	.ant-form-item {
		margin-bottom: 6px;
	}
</style>
